<template>
  <view class="account-container">
    <u-navbar title="向商家付款" :custom-back="handleClose" back-icon-color="#fff" title-color="#fff"
      :background="{ background: '#F65E49' }" :border-bottom="false"></u-navbar>
    <view class="content">
      <!-- 用户信息 -->
      <view class="users u-f-ajc">
        <view class="u-f-ajc">
          <image :src="user.face || '/static/images/member/icon-noface.jpg'" />
          <view>{{user.nickname}}</view>
        </view>
      </view>
      <!-- 条形码 -->
      <view style="padding: 30rpx;">
        <tki-barcode ref="barcode" :val="val" onval loadMake @result="barresult" class="barcode" />
      </view>
      <!-- 二维码 -->
      <view class="u-f-ajc" style="padding: 30rpx;">
        <view style="padding: 20rpx;border: 4px dashed #000;">
          <uqrcode ref="uqrcode"></uqrcode>
        </view>
      </view>

      <view class="account u-f-ajc">
        <view>补贴额度余额：{{account}}</view>
      </view>
    </view>


    <u-popup v-model="showPopup" mode="center" width="80%" height="35%" border-radius="30">
      <view style="padding: 50rpx;">
        <view style="font-size: 34rpx;font-weight: 700;margin-bottom: 50rpx;">请输入交易密码</view>
        <view style="width: 110%;margin-left: -24rpx;">
          <u-message-input :maxlength="6" focus breathe @finish="closeChange" width="70" dot-fill></u-message-input>
        </view>
        <view v-if="payObj.pay_amount" style="font-size: 34rpx;font-weight: 700;margin: 30rpx 0 50rpx;color: red;">
          将{{payObj.pay_amount.toString().substr(0, 1) == '-' ? '收款' : '付款'}}{{Math.abs(payObj.pay_amount)}}元</view>
        <view v-if="payObj.pay_amount" style="padding: 0 10rpx;">
          <u-button type="error" @click="memberPay">确认{{payObj.pay_amount.toString().substr(0, 1) == '-' ? '收款' : '付款'}}</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  var timer;
  import * as API_Members from '@/api/members'
  import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
  import md5Libs from '@/libs/function/md5.js'
  export default {
    components: {
      tkiBarcode,
    },
    data() {
      return {
        user: uni.getStorageSync('user'),
        val: '',
        img_url: '',
        size: 400,
        account: 0,
        time: 0,
        showPopup: false,
        paypass: '',
        payObj: {},
      };
    },
    onLoad(options) {
      this.getDepositBalance()
    },
    onShow() {
      clearInterval(timer)
      this.paypass = ''
      this.time = 0
      this.memberSignal()
    },
    onUnload() {
      console.log('onUnload')
      this.paypass = ''
      clearInterval(timer)
      this.time = 0
    },
    onHide() {
      console.log('onHide')
      this.paypass = ''
      clearInterval(timer)
      this.time = 0
    },
    methods: {
      closeChange(res) {
        console.log(res)
        this.paypass = md5Libs.md5(res)
        // this.submit()
      },
      // 付款
      async memberPay() {
        let res = await API_Members.memberPay(this.paypass)
        console.log('查看付款', res)
        this.paypass = ''
        this.showPopup = false
        this.$u.toast(res)
        this.getDepositBalance()
      },

      // 轮询查询
      memberSignal() {
        timer = setInterval(async () => {
          this.time += 1
          if (this.time > 60) return clearInterval(timer)
          let res = await API_Members.memberSignal()
          console.log('查看付款方轮询', this.time, res)
          if (res) {
            this.paypass = ''
            this.payObj = res
            this.showPopup = true
            clearInterval(timer)
            return
          }
          this.paypass = ''
          this.showPopup = false
        }, 1000)
      },
      //获取预存款余额
      async getDepositBalance() {
        let response = await API_Members.memberPayCode()
        console.log(response)
        this.val = response.pay_code
        this.img_url = response.qr
        setTimeout(() => {
          // this.$refs.qrcode._makeCode();
          this.$refs
            .uqrcode
            .make({
              mode: 'canvas', // 默认为view
              size: 200,
              text: this.val
            })
            .then(res => {
              // 返回的res与uni.canvasToTempFilePath返回一致
              console.log(res)
            })
        }, 100)


        let res = await API_Members.memberInfo()
        this.account = res.coupon_amount
      },
      barresult(e) {
        // console.log(e)
      },
      qrR(e) {
        // console.log('qrR', e)
      },
      //自定义返回按钮
      handleClose() {
        console.log('自定义返回')
        // #ifdef H5
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack(1)
          return
        }
        //使用vue-router返回上一级
        let a = this.$router.go(-1)
        if (a == undefined) {
          //重新定向跳转页面
          uni.switchTab({
            url: '/pages/tabs/mine/mine'
          });
        }
        return
        // #endif
        uni.navigateBack(1)
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F85C49;
  }

  .account-container {
    padding: 30rpx;
  }

  .content {
    width: 100%;
    background-color: #FFFEF9;
    border-radius: 20rpx;
    overflow: hidden;

    .users {
      background-color: #F9C285;
      padding: 20rpx;

      image {
        width: 50rpx;
        height: 50rpx;
        border-radius: 100%;
        margin-right: 10rpx;
      }
    }

    .barcode {
      width: 100%;

      /deep/ image {
        width: 100% !important;
        height: 150rpx !important;
      }
    }

    .account {
      margin: 50rpx 100rpx 0;
      padding: 30rpx 0 50rpx;
      border-top: 1px solid #eee;
      font-weight: 600;
      font-size: 34rpx;
    }
  }
</style>
